<template>

  <div>
    <div class="recharge-hd">账单明细</div>
    <div class="allorders">
      <!-- <div @click="orderform(1)" :class="indent == 1?'cancellation-order cancellation-active':'cancellation-order'">已完成</div> -->
      <!-- <div @click="orderform(2)" :class="indent == 2?'cancellation-order cancellation-active':'cancellation-order'">未完成</div> -->
      <!-- <div class="cancellation-order">
        <label>物品类型：</label>
        <el-select v-model="messageType" size="mini" @change="bingChangemessageType" placeholder="请选择">
          <el-option v-for="item in [{id:3,name:'金币购买'},{id:4,name:'道具购买'}]" :key="item.value" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div> -->
    </div>

    <div class="indent">

      <el-table :header-cell-style=" {background:'#FAFAFA',color:'#001013',fontWeight:'bold'}" v-loading="loading" :data="tableData" height="526" style="width: 100%">
        <el-table-column prop="consumName" label="交易类型" width="150" />
        <el-table-column prop="orderSn" label="订单号" width="150" />
        <el-table-column prop="consumTime" label="交易时间" width="150" />
        <el-table-column prop="orderPirce" align="center" label="订单金额" />
        <el-table-column prop="serveiceCharge" align="center" label="服务费" />
        <el-table-column align="center" label="实际金额">
          <template slot-scope="scope">
            {{scope.row.orderPirce - scope.row.serveiceCharge}}
          </template>
        </el-table-column>

        <el-table-column prop="balance" align="center" label="当前余额" />
        <!-- <el-table-column prop="orderStatus" align="center" label="查看">
          <template slot-scope="scope">
            <span style="cursor: pointer;" @click="orderDetails(scope.row.id)">详情</span>
          </template>
        </el-table-column> -->

      </el-table>
      <el-pagination background layout="prev, pager, next,sizes,total" v-if="total>0" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center;  margin-top: 60px;" :page-sizes="[10, 50, 100, 1000]">
      </el-pagination>
    </div>
    <!-- <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
      <el-table :data="tableDataDetails">
        <el-table-column property="date" label="日期" />
        <el-table-column property="date" label="日期" />
        <el-table-column property="date" label="日期" />
        <el-table-column property="date" label="日期" />
        <el-table-column property="date" label="日期" />
        <el-table-column property="date" label="日期" />
      </el-table>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  name: 'billingDetails',
  data () {
    return {
      dialogTableVisible: false,
      loading: false,
      tableData: [],
      tableDataDetails: [],
      indent: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  computed: {},

  mounted () {
    this.getConsumlist()
  },
  methods: {
    orderDetails (e) {
      this.dialogTableVisible = true
      this.tableDataDetails = []
      this.$apis
        .orderDetails({ orderId: e, page: 1, limit: 1000 })
        .then(res => {
          this.tableDataDetails = res.data.data.list
        })
    },

    bingChangemessageType () {
      this.getConsumlist()
    },
    getConsumlist () {
      this.loading = true
      this.$apis
        .consumlist({
          page: this.page,
          limit: this.limit
        })
        .then(res => {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          this.loading = false
        })
    },
    current_change (e) {
      this.page = e
      this.getConsumlist()
    },
    size_change (e) {
      this.limit = e
      this.getConsumlist()
    }
  }
}
</script>

<style lang="less" scoped>
.con-t-select {
  margin-top: 0px;
}
.content {
  display: flex;
  min-height: 100vh;
}
.myorderform {
  flex: 1;
  background-color: #fafafa;
}
.myset {
  text-align: center;
  padding: 70px 20px 50px;
  font-size: 16px;
  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  div {
    span {
      color: #d1483f;
    }
  }
}
.myorderform-title {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}
.goodsbuy {
  padding: 15px 0px;
  color: #828282;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
}
.goodsbuyatv {
  border-left: 4px solid #d82141;
  background-color: #fff;
}
.orderform {
  background-color: #fff;
  padding: 60px 40px;
  flex: 4;
  box-sizing: border-box;
}
.allorders {
  display: flex;
  margin-bottom: 20px;
}
.cancellation-order {
  border-right: 2px solid #ddd;
  padding: 0px 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  label {
    margin-bottom: 0px !important;
  }
}
.cancellation-active {
  color: #d82141;
}
.cancellation-order:last-child {
  border: none;
}
.cancellation-order:first-child {
  padding-left: 0;
}
.uni-input {
  border: 1px solid #e4e4e4;
  width: 30%;
  border-radius: 10px;
  padding: 10px 0;
  padding-left: 20px;
  margin-bottom: 40px;
}
.indent-select {
  display: flex;
  .uni-data-select {
    margin-right: 10px;
  }
  img {
    width: 80px;
    height: 60px;
  }
}
.uni-stat__select {
  margin-right: 40px;
  margin-bottom: 40px;
}
.seedetails {
  color: #fff;
  background: linear-gradient(#d82141, #f36638);
}

.recharge-hd {
  border-left: 3px solid #d82141;
  padding: 2px 10px;
  margin-bottom: 30px;
}
.recharge-bd {
  width: 500px;
  margin-left: 150px;
}

.recharg-but {
  margin-left: 100px;
  margin-top: 20px;
}

.particulars {
  margin: 30px 0px;
  padding: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.particulars-item {
  display: flex;
  line-height: 30px;
  b {
    color: #444444;
    font-size: 14px;
    flex: 1;
  }
  span {
    color: #888888;
    font-size: 16px;
    flex: 3;
  }
}

.myInfo {
  margin-top: 10px;
  .icon {
    font-style: normal;
    color: #986e32;
    font-size: 12px;
    background: #ffe863;
    border: 1px #986e32 dashed;
    padding: 2px 3px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
  }
}
</style>